<template>
	<header class="dashboard-header">
		<!-- 左侧：天气信息 -->
		<div class="header-left" :style="{ visibility: showWeather ? 'hidden' : 'hidden' }">
			<span class="location">{{ location }}</span>
			<img class="weather-icon" src="../../assets/cloud.png" alt="天气图标" />
			<span class="temperature">{{ temperature }}</span>
			<span class="divider">|</span>
			<span class="air-quality-label">{{ airQualityLabel }}</span>
			<span class="air-quality excellent">{{ airQuality }}</span>
		</div>

		<!-- 中间：标题 -->
		<h1 class="header-title">{{ headerTitle }}</h1>

		<!-- 右侧：时间和全屏按钮 -->
		<div class="header-right" :style="{ visibility: showWeather ? 'visible' : 'hidden' }">
			<div class="header-time">{{ formattedTime }}</div>
			<div class="fullscreen-button" @click="toggleFullScreen" :title="isFullscreen ? '退出全屏' : '进入全屏'">
				<i class="iconfont" :class="isFullscreen ? 'icon-tuichuquanping' : 'icon-fullscreen'"></i>
			</div>
		</div>
	</header>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onUnmounted } from 'vue';
import { formatDate } from '/@/utils/formatTime';

export default defineComponent({
	name: 'DashboardHeader',

	props: {
		headerTitle: {
			type: String,
			default: '',
		},
		showWeather: {
			type: Boolean,
			default: false,
		},
		isFullscreen: {
			type: Boolean,
			default: false,
		},
	},

	emits: ['toggleFullScreen'],

	setup(props, { emit }) {
		// 天气数据
		const location = ref('南京');
		const temperature = ref('17°C～26°C');
		const airQualityLabel = ref('空气质量:');
		const airQuality = ref('优');

		// 时间处理
		const formattedTime = ref('');
		let timerId: number | null = null;

		const updateTime = () => {
			formattedTime.value = formatDate(new Date(), 'YYYY年mm月dd日 HH:MM:SS WWW');
		};

		const initTimer = () => {
			updateTime();
			timerId = window.setInterval(updateTime, 1000);
		};

		// 全屏处理
		const toggleFullScreen = () => {
			emit('toggleFullScreen');
		};

		// 生命周期
		onMounted(() => {
			initTimer();
		});

		onUnmounted(() => {
			if (timerId) {
				clearInterval(timerId);
			}
		});

		return {
			location,
			temperature,
			airQualityLabel,
			airQuality,
			formattedTime,
			toggleFullScreen,
		};
	},
});
</script>

<style scoped lang="scss">
.dashboard-header {
	--header-height: 3.5rem;
	--text-color: #fff;
	--primary-font: bold 15px/1.5 sans-serif;
	--title-font: bolder 30px/1 sans-serif;
	--time-font: bold 18px/1.5 sans-serif;
	--spacing: 0.5rem;
	--quality-excellent: #6eaf00;

	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header-height);
	color: var(--text-color);
	background: url('../../assets/header.png') no-repeat center/cover;
	padding: 0 1rem;
}

.header-left {
	display: flex;
	align-items: center;
	gap: var(--spacing);
	font: var(--primary-font);
	letter-spacing: 1.5px;
	margin-top: 1rem;

	.weather-icon {
		display: block;
		height: 1.2em;
	}

	.divider {
		opacity: 0.7;
	}

	.air-quality {
		&-label {
			opacity: 0.9;
		}

		&.excellent {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 1.5rem;
			height: 1.5rem;
			padding: 2px;
			background-color: var(--quality-excellent);
			border-radius: 2px;
		}
	}
}

.header-title {
	font: var(--title-font);
	margin: 0;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	max-width: 60%;
	text-align: center;
}

.header-right {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.header-time {
	font: var(--time-font);
	letter-spacing: 1.5px;
	font-size: 1rem;
}

.fullscreen-button {
	cursor: pointer;
	transition: opacity 0.3s;

	&:hover {
		opacity: 0.8;
	}

	.iconfont {
		font-size: 1.2rem;
	}
}
</style>
